﻿<%@ Page Title="" Language="VB" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    User Groups
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="CurrentMenuIDContent" runat="server">configMenu</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="stylesheet" type="text/css" href="../../Content/jquery-ui-1.8.16.custom.css" />
    <script type="text/javascript" src="../../Scripts/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="../../Scripts/site.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="../../Scripts/jquery.tablesorter.pager.js"></script>
    <script src="<%= Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        User Groups</h2>
    <form id="groupForm" method="get" action="">
    <table>
        <tr>
            <td width="350px">
                <%= Html.TextBox("grupName", Nothing, New With {.class = "text wide-input"})%>
            </td>
            <td width="50px">
                <input id="btnAddGroup" type="submit" class="button" style="width: 120px;" value="Add New Group"
                    onclick="javascript:createGroup(); return false;" />
                <input id="btnSaveGroup" type="submit" class="button hidden" style="width: 120px;"
                    value="Save" onclick="javascript:updateGroup(); return false;" />
            </td>
            <td>
            <span id="errors"></span>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td width="*">
                <div id="treeContent" class="wide-tree-container">
                    <% Html.RenderPartial("~/Views/Group/Controls/GroupTree.ascx", ViewData("SiteList"))%>
                </div>
            </td>
            <td colspan="2" align="left">
                &nbsp;
            </td>
        </tr>
    </table>
    </form>
    <% Html.RenderPartial("~/Views/History/Controls/History.ascx")%>
    <script type="text/javascript">
        var selectedDepartmentID = <%: ViewData("SelectedDepartmentID")%>;
        var selectedGroupID = 0;

        function createGroup() {
            if (formValidate() === true) {
                var desc = $("#grupName").val();
                jQuery.ajax({
                    type: 'POST',
                    data: { siteID: selectedDepartmentID, desc: desc },
                    url: '<%= Html.AttributeEncode(Url.Action("CreateGroup")) %>',
                    success: function (result) {
                        $('#treeContent').html(result);
                        $("#grupName").val("");
                    }
                });
            }
        }

        function updateGroup() {
            if (formValidate() === true) {
                var desc = $("#grupName").val();
                jQuery.ajax({
                    type: 'POST',
                    data: { id: selectedGroupID, desc: desc },
                    url: '<%= Html.AttributeEncode(Url.Action("UpdateGroup")) %>',
                    success: function (result) {
                        $('#treeContent').html(result);
                    }
                });
             }
        }

        function selectDepartment(id) {
            $("#slLocRow_" + selectedDepartmentID).removeClass("selected-site-node");
            selectedDepartmentID = id;
            $("#slLocRow_" + id).addClass("selected-site-node");

            $("#grupName").val("");
            $("#btnSaveGroup").addClass("hidden");
            $("#btnAddGroup").removeClass("hidden");

            if (selectedGroupID != 0) {
                $("#groupNode_" + selectedGroupID).removeClass("selected-location-node");
                selectedGroupID = id;
            }

        }

        function selectGroup(id, locationId, desc) {
            selectDepartment(locationId);
            $("#groupNode_" + selectedGroupID).removeClass("selected-location-node");
            selectedGroupID = id;
            $("#groupNode_" + id).addClass("selected-location-node");

            $("#grupName").val(desc);

            $("#btnSaveGroup").removeClass("hidden");
            $("#btnAddGroup").addClass("hidden");
        }

        function showSiteNode(id) {
            $("#nodeSite_" + id).show();
            $("#btnSiteNode_" + id).attr('src', '../../content/img/minus.gif')[0].onclick = function () { hideSiteNode(id); return false; };
        }

        function hideSiteNode(id) {
            $("#nodeSite_" + id).hide();
            $("#btnSiteNode_" + id).attr('src', '../../content/img/plus.gif')[0].onclick = function () { showSiteNode(id); return false; };
        }

        function showDepartmentNode(id) {
            $("#nodeDepartment_" + id).show();
            $("#btnDepartmentNode_" + id).attr('src', '../../content/img/minus.gif')[0].onclick = function () { hideDepartmentNode(id); return false; };
        }

        function hideDepartmentNode(id) {
            $("#nodeDepartment_" + id).hide();
            $("#btnDepartmentNode_" + id).attr('src', '../../content/img/plus.gif')[0].onclick = function () { showDepartmentNode(id); return false; };
        }

        function formValidate() {
            return $('#groupForm').validate({
                rules: {
                    "grupName": { required: true }
                },
                messages: {
                    "grupName": "Group name is required."
                },
                errorLabelContainer: '#errors'
            }).form();
        }
    </script>
</asp:Content>
